<p>
  {{name}} works!
</p>
<hr>
<ul>
  <li>年龄：{{age}}</li>
  <li>邮箱：{{email}}</li>
  <li>地址：{{address.state}} - {{address.city}} - {{address.street}}</li>
</ul>
<ul>
  <li *ngFor='let h of hello;let i="index"'>
    {{i+1}}{{h}}
    <button (click)="deleteHobby(i)">X</button>
  </li>
</ul>
<button (click)="onClick(hobby.value)">点我</button>

<hr>
<form (submit)="addHobby(hobby.value)">
  <div>
    <label for="hobby">爱好:</label>
    <input type="text" #hobby>
    <button (click)="addHobby2(hobby.value)">增加</button>
  </div>
</form>
<hr>
<button (click)="isEdit()">是否编辑用户信息</button>
<div *ngIf="editState">
  <h1>编辑用户信息</h1>
  <form>
    <div>
      <label for="name">姓名:</label>
      <input type="text" [(ngModel)]="name" name="name">
    </div>
    <div>
      <label for="age">年龄:</label>
      <input type="text" [(ngModel)]="age" name="age">
    </div>
    <div>
      <label for="email">邮箱:</label>
      <input type="text" [(ngModel)]="email" name="email">
    </div>
    <div>
      <label for="state">省份:</label>
      <input type="text" [(ngModel)]="address.state" name="state">
    </div>
    <div>
      <label for="city">城市:</label>
      <input type="text" [(ngModel)]="address.city" name="city">
    </div>
    <div>
      <label for="street">区域:</label>
      <input type="text" [(ngModel)]="address.street" name="street">
    </div>
  </form>
</div>
<hr>
<h1>
    home works!
  </h1>
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let u of users">
      {{u}}
  
    </li>
  </ul>